<%@ page import="utils.DataBaseUtil" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<jsp:useBean id="content" scope="session" type="save.data.blogContentBean"/>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>博客详情页</title>

    <link rel="stylesheet" href="resources/css/blog_detail.css">
    <link rel="stylesheet" href="resources/css/common.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

    <style>
        .container-center{
            height: 100%;
            width: 795px;
            border-radius: 20px;
            margin: 0 auto;


        }
        .item {
            width: 800px;
            display: flex;
            margin-bottom: 20px;

        }

        .photo {
            height: 60px;
            width: 60px;
            background-image: url("resources/image/头像1.jpg");
            -o-background-size: 60px,60px;
            border-radius: 15px;
            margin-right: 20px;

        }

        .text {
            flex: 1;
            padding: 20px;
            background-color: #d7d7d7;
            border-radius: 15px;
        }

        .title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }


        .comment{
            width: 600px;
            height: 150px;
            margin: 0 auto;
            padding: 15px;
            display: flex;
            border-radius: 25px;


        }

        .btu{
            width: 60px;
            height: 35px;
            border-radius: 8px;
            font-size: 15px;
            background-color: rgba(41, 83, 149, 0.7);
            border: none;
            float: right;
            margin: 60px 100px;
        }

    </style>
</head>
<body class="bg">
<!-- 导航栏 -->
<div class="nav d-flex">
    <img src="resources/image/log.png" alt="">
    <span class="title">我的博客系统</span>
    <!-- 使用 span 把左右两侧的元素给撑开 -->
    <span class="spacer"></span>
    <a href="index">主页</a>
    <a href="edit.jsp">写博客</a>
    <a href="quit">注销</a>
</div>
<!-- 版心 -->

    <div class="container-center position">
            <div class= blog-content>
                <h3>${content.title}</h3>
                <div class= date>发表日期：${content.createTime}，发表人:${content.publisher} </div>
                <div class= detail>${content.blogContent}</div>
            </div>

        <%

            Integer blogId = content.getBlogId();//获取当前博客内容的Id
            //查询评论信息

            String username;
            String comment_content;
            String comment_time;
            ResultSet query = null;
            Connection con = null;
            PreparedStatement preparedStatement = null;
            try {

                con = DataBaseUtil.getConnection();
                String queryComment = "select username,comment_content,comment_time from comment left join user on user.userId = comment.userId where comment.blogId=?";
                preparedStatement  = con.prepareStatement(queryComment);
                preparedStatement.setInt(1, blogId);
                query = preparedStatement.executeQuery();
                while (query.next()) {
                    username = query.getString("username");
                    if (username == null){
                        username="该用户已经注销";
                    }
                    comment_content = query.getString("comment_content");
                    comment_time = query.getString("comment_time");
                    out.print("<div class=item >");

                    out.print("<div class=text>");
                    out.print("<div class=title>");
                    out.print("<div>" + username + ":</div>");
                    out.print("<div>时间：" + comment_time + "</div>");
                    out.print("</div>");
                    out.print(" <div class=content>" + comment_content + "</div>");
                    out.print(" </div>");
                    out.print(" </div>");
                }
            }
            catch (Exception e){
                System.out.println("显示评论： " + e);
            }
            finally {
                DataBaseUtil.close(query,null,con,preparedStatement);
            }

        %>

        <form action="comment?blogId=${content.blogId}" method="post" class="form-comment" onSubmit="return beforeSubmit(this);">
            <h2>输入评论:</h2>
            <textarea class="comment" name="comment"></textarea>
            <button class="btu" type="submit">提交</button>
        </form>

    </div>

    </div>




</body>
<script>
    function beforeSubmit(form){
        if(form.comment.value==='') {
            alert('评论不能为空！');
            form.comment.focus();
            return false;
        }
        return true;
    }
</script>
</html>
